<template>
  <div class="home-view">
    <el-empty description="首页" />
    <h2 class="title">{{ msg }}</h2>
    <!-- <h3>手动阀手动阀</h3> -->
    <!-- <video
      style="width: 100px; height: 100px"
      crossorigin="anonymous"
      preload="auto"
      src="blob:https://www.bilibili.com/97bc1114-cbc0-4a65-9421-557a5fbbe826"
    ></video> -->
    <el-button @click="fetchClick">下载</el-button>
    <!-- <h1>{{state.gtr}}</h1> -->
    <!-- <iframe style="width:100%" src="https://oss.bjingling.com/scorm/1517787756607197184/1650619064840/content/page/index.html"></iframe> -->
    <el-button @click="handleCookie">设置cookie</el-button>
    <el-button @click="getCookie">获取cookie</el-button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import fetch from 'isomorphic-fetch'

const store = useStore()
const msg = ref('Welcome to the management system')
const state = reactive({
  gtr: 'wwq',
  cookData: 'lili',
  gtr: 'ffff'
})

const h2Style = reactive({
  color: '#435448'
})

const fetchClick = () => {
  // const url = 'https://www.bilibili.com/97bc1114-cbc0-4a65-9421-557a5fbbe826'
  fetch(url)
    .then((res) => res.blob())
    .then((blob) => {
      // 将url替换成blob文件的地址
      debugger
      let link = document.createElement('a')
      link.href = URL.createObjectURL(blob)
      link.download = item.name
      // document.body.appendChild(link);
      link.click()
      //document.body.removeChild(link)
    })
}

// setInterval(() => {
//   h2Style.color = '#' + Math.random().toString(16).slice(-6)
// }, 1000)
const handleCookie = () => {
  console.log('345')
  document.cookie = `cname=${state.cookData}; age=${state.gtr}`
}

const getCookie = () => {
  console.log('456', document.cookie)
}
</script>

<style lang="less" scoped>
.home-view {
  .title {
    color: v-bind('h2Style.color');
    text-align: center;
  }
}
</style>
